<template>
  <a-row :gutter="5">
    <a-card :bordered="false">
      <!-- table区域-begin -->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="departName" slot-scope="text">
          <j-ellipsis :value="text" :length="20" />
        </span>
        <span slot="createTime" slot-scope="text, record">
          <a-progress style="width: 80%" :percent="Number(record.accountedForAll)" :show-info="false" />
        </span>
      </a-table>
      <!-- table区域-end -->

      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <span>统计表</span>
      </div>

      <div class="echart">
        <div>
          <LPie v-if="ecahrtShow" :stage="leftChartData"></LPie>
        </div>
        <div>
          <RPie v-if="ecahrtShow" :types="rightChartData"></RPie>
        </div>
      </div>
    </a-card>
  </a-row>
</template>

<script>
import columns from './indexColumns'
import 'moment/locale/zh-cn'
import { httpAction, getAction } from '@/api/manage'
import LPie from '../../../components/LPie'
import RPie from '../../../components/RPie'
import store from '@/store/'
export default {
  name: 'countTable',
  components: {
    LPie,
    RPie,
  },
  data() {
    return {
      // 表头
      loading: false,
      columns: columns(this),
      leftChartData: [],
      rightChartData: [],
      ecahrtShow: false,
      url: {
        list: '/sjzyzhgl/sjPlanInfo/statisticalPlanNum',
      },
      dataSource: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '15'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      getAction(this.url.list, {
        companyId: store.getters.departInfo.id,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result[0].list.records
          res.result[0].stages.map((item) => {
            this.leftChartData.push({ value: item.stageValue, name: item.stageName })
          })
          res.result[0].types.map((item) => {
            this.rightChartData.push({ value: item.typeValue, name: item.typeName })
          })
          this.ecahrtShow = true
          if (res.result[0].list.total) {
            this.ipagination.total = res.result[0].list.total
          } else {
            this.ipagination.total = 0
          }

          console.log(this.rightChartData)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      console.log(pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
  },
}
</script>
<style scoped>
/*@import '~@assets/less/common.less'*/
</style>
<style lang="less" scoped>
.echart {
  height: 340px;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  div {
    height: 340px;
    width: 770px;
  }
}
</style>